<script setup>
    import { ref, watch, nextTick } from 'vue'
    import { useVModel, useDebounceFn } from '@vueuse/core'
    import {
        SearchOutlined,
    } from "@ant-design/icons-vue"
    import request from "../../common/utils/request"
    import { useRouter } from 'vue-router'

    const props = defineProps({
        visible: {
            type: Boolean,
            default: false
        }
    })
    

    const emit = defineEmits(['update:visible'])
    const modalVisible = useVModel(props, 'visible', emit)

    const keywords = ref('')
    const appList = ref([])
    const loading = ref(false)
    const router = useRouter()
    const searchInputRef = ref(null)

    const onKeywordsChange = useDebounceFn(async () => {
        if(keywords.value) {
            const { data } = await request.get('work_ai', '/plugin/search', {
                keywords: keywords.value
            })

            appList.value = data
            loading.value = false
        }
    }, 300)

    const onAppClick = (app) => {
        if(app.type == 1){
            router.push(`/sceneModel/scene/${app.top_cat_id}?appId=${app.id}`)
        } else if (app.type == 2){
            router.push(`/industryModel/industry/${app.top_cat_id}?appId=${app.id}`)
        } else if (app.type == 3){
            router.push(`/chatModel/create?pluginId=${app.id}`)
        } else if (app.type == 4){
            router.push(`/chatModel/promptDetail?id=${app.id}`)
        }

        modalVisible.value = false
    }

    watch(modalVisible, () => {
        if (! modalVisible.value) {
            keywords.value = ''
            appList.value = []
        }

        if(modalVisible.value){
            nextTick(() => {
                searchInputRef.value.focus()
            })
        }
    })

    watch(keywords, () => {
        if (keywords.value == '') {
            appList.value = []
            loading.value = false
        } else {
            loading.value = true
        }
    })

    
</script>

<template>
    <a-modal width="800px" wrapClassName="search-modal" :visible="modalVisible" :footer="null" :closable="false" @cancel="modalVisible = false">
        <div>
            <a-input ref="searchInputRef" placeholder="请输入关键词" v-model:value="keywords" @change="onKeywordsChange" style="border-radius: 10px; height: 40px;" allowClear>
                <template #prefix>
                    <SearchOutlined />
                </template>
            </a-input>
        </div>
        <div class="mt-20 flex flex-col justify-center">
            <a-spin v-if="loading" />
            <template v-else>
                <div class="app-list" v-if="keywords != '' && appList.length > 0">
                    <div class="app-item flex align-center" v-for="(app, index) of appList" :key="index" @click="onAppClick(app)">
                        <div class="app-icon">
                            <cu-icon
                                type="icon-tishici"
                                style="font-size: 38px;"
                                v-if="app.type == 4"
                            ></cu-icon>
                            <img :src="app.icon" v-else>
                        </div>
                        <div class="app-title">{{ app.name }}</div>
                        <div class="app-type">
                            {{ app.type == 1 ? '应用' : app.type == 2 ? '行业' : app.type == 3 ? '创作' : '提示词' }}
                        </div>
                    </div>
                </div>
                <div class="flex justify-center align-center" style="height: 200px;" v-else>
                    <a-empty :description="keywords ? `${keywords} 没有查找到数据` : '请输入关键词'"/>
                </div>
            </template>
        </div>
    </a-modal>
</template>

<style>
    .search-modal .ant-modal-content {
        background-color: #f6f6f7;
    }
</style>

<style lang="less" scoped>
    .app-list {
        max-height: 500px;
        overflow-y: auto;

        .app-item {
            margin-bottom: 10px;
            border-radius: 10px;
            background-color: #ffffff;
            padding: 10px;
            cursor: pointer;
            overflow: hidden;
            position: relative;

            .app-icon {
                width: 38px;
                height: 38px;

                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 10px;
                }
            }

            .app-title {
                margin-left: 10px;
                font-size: 14px;
            }

            .app-type {
                position: absolute;
                right: -23px;
                top: -4px;
                font-size: 12px;
                color: #ffffff;
                background-color: rgb(255, 101, 98);
                transform: rotate(45deg);
                text-align: center;
                padding: 13px 8px 2px;
                width: 75px;
            }

            &:hover {
                background-color: rgb(255, 101, 98);
                color: #ffffff;
            }

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
</style>